<script setup>
import {ref, inject, h} from 'vue'
const {toPage} = inject('toPage')
import learnCommunal from "@/components/communal/learn-communal.vue";
import {NIcon} from "naive-ui";
function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) });
}
const baseImgPath = '/src/assets/picture/'
const cardOptions = ref([
    {id:1,label:'课程 course',
      tags:[{name:'计算机编程',type:'info'},{name:'深度学习',type:'success'},{name:'在线教育',type:'error'}],
      title:'在线课程涵盖编程语言入门至深度学习实战，包括C、Python等语言教学及计算机视觉、自然语言处理等领域深度学习应用。',
      text:'本系列在线课程专注于计算机语言学习和深度学习领域，首先为学员提供全面的计算机编程语言课程，' +
          '包含但不限于C、Java、Python等主流语言的教学，深入浅出地解析编程原理，培养扎实的代码编写能力和问题解决思维。' +
          '随后，在您掌握基础后，我们将引领您进入深度学习领域，通过实际操作Python编程环境以及Keras、TensorFlow等深度学习框架，' +
          '系统学习并实践计算机视觉、自然语言处理、神经网络等前沿技术。课程内容丰富，既有理论知识铺垫，又有实战项目演练，' +
          '旨在帮助具备一定数学和编程基础的学习者进一步提升技能，接轨人工智能时代。',
      src:baseImgPath+'coolkidsStudy.png',
      to:'std/curriculum'
    },
  {id:2,label:'模型 model',
    tags:[{name:'云端服务',type:'info'},{name:'深度学习开发',type:'success'},{name:'模型训练部署',type:'error'}],
    title:'在线模型训练平台提供云端一站式服务，支持从数据处理、模型构建到训练优化的全链条AI开发流程，简化开发过程，实现模型高效迭代与部署。',
    text:'在线模型训练平台是一款集成了数据管理、模型开发、训练优化、评估验证及模型部署等功能于一体的云端服务平台。' +
        '用户无需自建计算集群，即可享用在线模型调用，快速进行数据预处理、使用的深度学习模型，并实现高效的模型训练。' +
        '平台内置丰富的模型库供用户选择，满足不同层次开发者需求。同时，平台实时监控训练进度，提供详尽的训练日志和可视化图表，' +
        '便于调试优化。完成训练后的模型可一键下载，有效缩短各种项目的研发周期，降低企业研发成本。',
    src:baseImgPath+'FreshFolkTeaching.png',
    to:'std/model'
  },
  {id:3,label:'代码社区 code community',
    tags:[{name:'开发者社群',type:'info'},{name:'代码分享与协作',type:'success'},{name:'技术交流与学习',type:'error'}],
    title:'在线代码社区集合编程爱好者，提供代码分享、协同编辑与答疑解惑服务，促进开发者交流与成长。',
    text:'在线代码社区是互联网上的协作平台，汇聚全球程序员，用户可共享代码片段、探讨技术问题、参与项目协作开发，' +
        '并通过版本控制、问题追踪等功能强化软件开发实践。这些社区支持多种编程语言，鼓励知识传播与经验分享，助力开发者提升技能、获取实时反馈及解决实际编程难题。',
    src:baseImgPath+'CroodsComments.png',
    to:'std/forum'
  }
])
</script>

<template>
  <learn-communal>
    <n-card v-for="item in cardOptions" :key="item.id" :title="item.label" hoverable class="lv-card">
      <template #header-extra>
        <n-time format="yyyy年MM月dd日" time-zone="Asia/Shanghai" minutes/>
      </template>
      <n-space>
        <n-tag v-for="tag in item.tags" :type="tag.type" size="small">
          {{ tag.name }}
        </n-tag>
      </n-space>
      <n-flex justify="space-between" :wrap="false">
        <n-space vertical  justify="center">
          <n-ellipsis expand-trigger="click" :line-clamp="1" :tooltip="false" class="ne-title">{{item.title}}</n-ellipsis>
          <n-ellipsis expand-trigger="click" :line-clamp="2" :tooltip="false" class="ne-content">{{item.text}}</n-ellipsis>
        </n-space>
        <n-image
            width="120"
            :src="item.src"
            preview-disabled
        />
      </n-flex>
      <template #action>
        <n-space justify="end">
          <n-button type="info" round @click="toPage(item.to)">点击进入</n-button>
        </n-space>
      </template>
    </n-card>
  </learn-communal>
</template>

<style lang="scss" scoped>
.lv-card{
  margin-bottom: 1rem;
  &:nth-child(2){
    margin-top: 1rem;
  }
}
.ne-title{
  text-indent: 2rem;
  font-weight: bold;
}
.ne-content{
  text-indent: 2rem;
}
</style>
